<script setup>
import { ref, onMounted } from 'vue'
import { getHotProductAPI } from '@/apis/product'

const productList = ref([])

onMounted(async () => {
    const res = await getHotProductAPI();
    if (res.code === 2000) {
        productList.value = res.data
    }
})
</script>

<template>
<div class="product-container">
    <div class="container-header">
        <div class="title">热门商品</div>
        <div class="more"><a href="#">更多</a></div>
    </div>
    <div class="product-list">
        <div class="product-card" v-for="product in productList" :key="product.id">
            <RouterLink :to="`/productDetail/${product.id}`">
                <div class="product-img"><img :src="product.pic" alt=""></div>
                <div class="product-data">
                    <div class="price">
                        <template v-if="product.minPrice === product.maxPrice">{{ product.minPrice }}</template>
                        <template v-else>{{ product.minPrice }}-{{ product.maxPrice }}</template>
                        <span>元</span>
                    </div>
                    <div class="sale">近日成交99单</div>
                </div>
                <div class="product-des">{{ product.description }}</div>
            </RouterLink>
        </div>
    </div>
</div>
</template>

<style scoped lang='scss'>
.product-container {
    width: 1280px;
    margin: 10px auto;
    padding: 20px 30px;
    background-color: #fff;

    .container-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid #f4f4f4;

        .title {
            width: 100px;
            font-size: 20px;
            font-weight: bold;
        }

        .more {
            width: 80px;
            
            >a {
                color: #646464;
                font-size: 12px;
            }
        }
    }

    .product-list {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        min-height: 400px;

        .product-card {
            flex-direction: column;            
            width: 240px;
            height: 280px;
            padding: 15px;
            transition: all .3s;
            
            &:hover {
                transform: translate3d(0, -3px, 0);
                box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
            }

            >a {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
            }

            .product-img {
                width: 180px;
                height: 180px;
            }

            .product-data {
                display: flex;
                justify-content: space-between;
                width: 180px;
                height: 25px;
                margin-top: 10px;
                margin-bottom: 5px;

                >div {
                    height: 100%;
                    line-height: 25px;
                }

                .price {
                    color: #ff442f;
                    font-size: 18px;

                    >span {
                        font-size: 14px;
                    }
                }

                .sale {
                    color: #909090;;
                    font-size: 12px;
                }
            }

            .product-des {
                width: 180px;
                height: 30px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}
</style>
